<script type="text/javascript" src="/js/echarts.min.js"></script>
<script type="text/javascript">
$(function(){
	var pg = App.message.queueMonitorIndex.ui, pp = pg.params || {},
		queueName = pg.find('.navi>.name');
	
	var rateChart = echarts.init(pg.seek('rateChart')[0])
		, stockChart = echarts.init(pg.seek('stockChart')[0])
		, timeArr = [], inRateArr = [], outRateArr = [], stockArr = []
		, maxLen,asStatus=false;
	var frm = {
		date: pg.seek('date'),
		hour: pg.seek('hour'),
		minute: pg.seek('minute'),
		second: pg.seek('second'),
		rTime: pg.seek('rTime'),
		tTime: pg.seek('tTime'),
		start: pg.seek('start'),
		autoStop: pg.seek('autoStop')
	};
	
	var dateCfg = {
		prevText: "<上一月",
		nextText: "下一月>",
		dateFormat: "yy-mm-dd",
		changeMonth: true,
		changeYear: true,
		inline: true
	};
	initPageInfo();
	 function getValues() {
			return {
				date: pg.seek('date').val(),
				hour: pg.seek('hour').val(),
				minute: pg.seek('minute').val(),
				second: pg.seek('second').val(),
				rTime: pg.seek('rTime').val(),
				tTime: pg.seek('tTime').val(),
				start: pg.seek('start').val()
			}
		}
	//页面输入框 按钮状态  初始化  status:true  可点击   status:false 不可
	function initInput(status) {
		if(status){
			for(var pro in frm){
				frm[pro][0].disabled= false;
			}
			pg.seek('stop')[0].disabled= true;
		}else{
			
			for(var pro in frm){
				
				frm[pro][0].disabled= true;
			}
			console.log(frm)
			pg.seek('stop')[0].disabled= false;
		}
	}
	
	//初始化界面初始值
	function initPageInfo() {
		var dateInit = new Date();
		frm.date.datepicker(dateCfg);
		frm.date.val(dtfmt_ymd(dateInit));
		frm.hour.val(dtfmt_hms(dateInit.getHours()));
		frm.minute.val(dtfmt_hms(dateInit.getMinutes()));
		frm.second.val(dtfmt_hms(dateInit.getSeconds()));
		initChart();
		initInput(true)
	}
	//chart界面初始化
	function initChart() {
		rateChart.setOption({
			grid: { // 控制图的大小
				x:50,
				y:40,
				x2: 25,
				y2:45
			},
			title: {
				x:'center',
				y:'bottom',
				//text: pp.name +' 出入队速度',
				text: '出入队速度',
				textStyle:{
					color:'#388CD2',
					fontSize:14
				}
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					animation: true
				}
			},
			legend: {
				data: ['入队速度', '出队速度']
			},
			xAxis: {
				boundaryGap: false,
				data: timeArr,
			},
			yAxis: {
				type: 'value',
				boundaryGap: false
			},
			series: [{
				name: '入队速度',
				type: 'line',
				data: inRateArr,
				itemStyle: {
					normal: {
						lineStyle: {
							width:1 //折线宽度
						}
					}
				}
			}, {
				name: '出队速度',
				type: 'line',
				data: outRateArr,
				itemStyle: {
					normal: {
						lineStyle: {
							width:1 //折线宽度
						}
					}
				}
			}],
			color:['#388CD2','#EA0000']
		});

		stockChart.setOption({
			grid: { // 控制图的大小
				x:50,
				y:40,
				x2: 25,
				y2:45
			},
			title: {
				//text: pp.name + ' 积压消息数',
				text: ' 积压消息数',
				x:'center',
				y:'bottom',
				textStyle:{
					color:'#388CD2',
					fontSize:14
				}
			},
			tooltip: {},
			legend: {
				data: ['积压消息数']
			},
			xAxis: {
				boundaryGap: false,
				data: timeArr
			},
			yAxis: {
				type: 'value',
				boundaryGap: false,
			},
			series: [{
				name: '积压消息数',
				type: 'line',
				data: stockArr,
				itemStyle: {
					normal: {
						lineStyle: {
							width:1, //折线宽度,
						}
					}
				}
			}],
			color:['#388CD2']
		});
	}
	//格式化年月日
	function dtfmt_ymd(v) {
		var year = v.getFullYear();
		var month = v.getMonth() + 1;
		var day = v.getDate();
		return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
	}
	//格式化时分秒
	function dtfmt_hms(v) {
		return v < 10 ? ('0' + parseInt(v)) : v;
	}
	pg.find('input').blur(function (e) {
		switch (e.currentTarget.name) {
			case 'hour':
				frm.hour.val() < 10 ? frm.hour.val('0' + parseInt(frm.hour.val())) : '';
				break;
			case 'minute':
				frm.minute.val() < 10 ? frm.minute.val('0' + parseFloat(frm.minute.val())) : '';
				break;
			case 'second':
				frm.second.val() < 10 ? frm.second.val('0' + parseInt(frm.second.val())) : '';
				break;
		}
	});
	pg.seek('back').click(function(){
		App.show({
			title: '队列与主题',
			ctx: 'message',
			action: 'queueIndex',
			params: {}
		}, $.noop, pg.parent());
	});
	frm.autoStop.click(function (e) {
		asStatus=false;
		if(!e.currentTarget.checked){
			 return;
		}
		if(!validateStopTime()){
			e.currentTarget.checked = false;
			mac.alert('自动停止时间应大于当前时间~');
			return;
		}
		asStatus=e.currentTarget.checked;
		var v = App.message.validation,
			vDate = frm.date.val(),
			vTime = frm.hour.val() + ':' + frm.minute.val() + ':' + frm.second.val();
		if (e.currentTarget.checked) {
			if (!v.monitor.vDate(vDate) || !v.monitor.vTime(vTime)) {
				e.currentTarget.checked = false;
				mac.alert("时间格式不正确,正确格式为: 2014-01-01 12:00:00 ");
			} else {
				asStatus=e.currentTarget.checked;
			}
			return;
		}
	});

	function stock1(d) {
		if (stockArr.length > maxLen) {
			stockArr.shift();
		}
		stockArr.push(Math.max(0, d.size));
		stockChart.setOption({
			xAxis: {
				data: timeArr,
				boundaryGap: false,
			},
			series: [{
				name: '积压消息数',
				data: stockArr
			}]
		});
	}

	function rate1(d) {
		if (inRateArr.length > maxLen) {
			inRateArr.shift();
		}
		inRateArr.push(d.in);
		if (outRateArr.length > maxLen) {
			outRateArr.shift();
		}
		outRateArr.push(d.out);
		rateChart.setOption({
			xAxis: {
				data: timeArr,
				boundaryGap: false,
			},
			series: [{
				name: '入队速度',
				type: 'line',
				data: inRateArr
			}, {
				name: '出队速度',
				type: 'line',
				data: outRateArr
			}]
		});
	}

	//获取监控信息
	function getMonitor() {
		clearInterval(App.timer);
		App.timer = setInterval(function () {
			var da = new Date();
			if (timeArr.length < maxLen+1) {
				timeArr.push(dtfmt_hms(da.getHours()) + ':'
						+ dtfmt_hms(da.getMinutes()) + ':' + dtfmt_hms(da.getSeconds()))
			} else {
				timeArr.shift();
				timeArr.push(dtfmt_hms(da.getHours()) + ':'
						+ dtfmt_hms(da.getMinutes()) + ':' + dtfmt_hms(da.getSeconds()))
			}
			$.get(App.ctx + '/target/queue/stat.do', {
				id: pp.id,
				r: new Date().getTime()
			}, function (rs) {
				var ro = mac.eval(rs), d = ro.data;
				if (ro.success) {
					d.in = ro.data.in;
					d.out = ro.data.out;
					d.size = ro.data.size;
					stock1(d);
					rate1(d);
				}
			});
		}, frm.rTime.val() * 1000);
	}

	frm.start.click(function () {
		 if(!validateStopTime()&&asStatus){
				mac.alert('自动停止时间应大于当前时间~');
				return;
			}
		if(frm.rTime.val()<3){
			mac.alert('刷新时间最小为3秒');
			return;
		}
		if(parseInt(frm.tTime.val())%parseInt(frm.rTime.val()*1)!=0){
			mac.alert('显示时长应为刷新时间整数倍');
			return;
		}
		mac.confirm('<div class="confirm">刷新时间:'+frm.rTime.val()+'秒&nbsp;&nbsp;'+'显示时长:'+frm.tTime.val()+'秒&nbsp;&nbsp;确定要开始吗？</div>', function(){
			initInput(false);
			maxLen=parseInt(frm.tTime.val())/parseInt(frm.rTime.val())
			if(asStatus){
				App.timer1 = setInterval(function () {
					if (compareTime(getDate())) {
						clearInterval(App.timer);
						clearInterval(App.timer1);
					}
				}, 1000);
				asStatus=!asStatus;
			}
			getMonitor();
		});
		
	});

	pg.seek('stop').click(function () {
		mac.confirm('<div class="confirm">确定要停止吗？</div>', function(){
			initInput(true);
			clearInterval(App.timer);
			clearInterval(App.timer1);
		});
	});

	//获取时间 yy-mm-dd hh-mm-ss
	function getDate() {
		var date = new Date();
		return date.getFullYear() + '-' +
			dtfmt_hms((date.getMonth() + 1)) + '-' +
			dtfmt_hms(date.getDate()) + ' ' +
			dtfmt_hms(date.getHours()) + ':' +
			dtfmt_hms(date.getMinutes()) + ':' +
			dtfmt_hms(date.getSeconds())
	}

	//当前时间与结束时间比较
	function compareTime(currentTime) {
		var stopTime = frm.date.val() + ' ' + frm.hour.val() + ':' + frm.minute.val() + ':' + frm.second.val();
		if (stopTime === currentTime) {
			return true;
		}
		return false;
	}
	//自动停止时间的验证 确保自动停止时间大于当前时间
	function validateStopTime(){
		var pms=getValues();
		var tempTimeArr=pms.date.split('-');
		var stopTime= new Date( tempTimeArr[0],
			tempTimeArr[1]-1,
			tempTimeArr[2],
			pms.hour,
			pms.minute,
			pms.second).getTime();
		var currentTime= new Date().getTime();
		if(stopTime-currentTime<=0){
			return false
		}
		return true;
	}
	
	function adjust(){
		var h = pg.parent().height();
		pg.height(h);
	}
	$(window).resize(adjust);
	adjust();
	
	queueName.text(pp.name || pp.code);
});
</script>
<div class="infoPl monitor">
	<div class="navi">
		<span class="a" name="back">队列管理</span>&gt;&gt;
		<span class="name">Xxx队列</span>&gt;&gt;
		<span>总体监控</span>
	</div>
	<div class="head">
		<div>
			<div class="label">刷新时间：</div>
			<input disabled="true" name="rTime" min="3" type="number" value="3" class="long" />
			<span>秒</span>
		</div>
		<div class="item total">
			<div class="label">显示时长：</div>
			<input name="tTime" type="number" value="600" class="long" />
			<span>秒</span>
		</div>
		<div>
			<div class="label">自动停止：</div>
			<div>
				<input name="autoStop" type="checkbox" />
				<span>于</span>
				<input type="text" name="date" class="long" />
			</div>
			<div class="calendar"></div>
			<input name="hour" min="00" max="23" class="short" value="00" type="number" placeholder="时"/>
			<span>:</span>
			<input name="minute" min="00" max="59" class="short" value="00" type="number" placeholder="分"/>
			<span>:</span>
			<input name="second" min="00" max="59" class="short" value="00" type="number" placeholder="秒"/>
			<button name="start">开始</button>
			<button name="stop" class="stopButton">停止</button>
		</div>
		<input type="text" name="key" class="fr hidden" placeholder="查找"/>
		<button name="create" class="hidden">创建</button>
	</div>
	<div class="clear"></div>
	<div class="chart fl" name="rateChart"></div>
	<div class="chart fl" name="stockChart"></div>
</div>